<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css"
</head>
<body>
<%--
    1、使用bootstrap给页面设置对应的样式，由于bs依赖于jQuery，还需要导入jQuery
    2、在要使用的bs页面中引入bs的样式和js文件
    3、在需要适应样式逇标签内的class属性值 使用bs提供的已经写好的样式的class值，标签会自动拥有样式
    4、在需要使用layer的页面中引入jQuery和layer的js文件
--%>
<span class="glyphicon glyphicon-plane"></span>
<hr>
    <p class="btn btn-default btn-success">你好，我是bootstrap</p>
    <a class="btn btn-default btn-danger">你好，我是李焕英</a>
    <img src="static/img/pic.jpg" class="img-circle">

<%--栅格系统div:容器  container--%>
    <div class="container">
        <%--row 容器的一个行 一行在每个分辨率下有12个列--%>
        <div class="row">
            <div class="col-lg-2">11</div>
            <div class="col-lg-2">12</div>
            <div class="col-lg-2">13</div>
            <div class="col-lg-2">14</div>
            <div class="col-lg-2">15</div>
            <div class="col-lg-2">16</div>
        </div>
    </div>

<hr>

<table class="table table-hover table-bordered" style="width: 80%;">
    <thead>
        <%--存放表--%>
    </thead>
    <tbody>
        <%--存放表格内容--%>
        <tr class="success">
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
        </tr>
        <tr class="info">
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
        </tr>
        <tr class="warning">
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
            <td>35</td>
        </tr>
    </tbody>
    <tfoot>
        <%--存放分页导航--%>
        <tr>
            <td colspan="4">
                <ul class="pagination">
                    <li><a href="#">&laquo;</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>
            </td>
        </tr>
    </tfoot>
</table>

<%--jQuery一定在bs之前引入--%>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/layer/layer.js"></script>
<script>
    $(function () {
        /*弹出信息框*/
       // layer.alert("你好~~！",{title:"提示："})
        /*弹出提示框*/
      //  layer.msg("天王盖地虎~~！")
        /*弹出确认框*/
       /* layer.confirm("你确定要删除吗？",{title:"FBI警告：",icon:3},function (index) {
            /!*确认按钮的单击事件*!/
            console.log("发送删除请求~~");
            /!*如果自己处理了确认框事件，需要手动关闭layer弹窗*!/
            /!*关闭所有*!/
            //layer.closeAll();
            /!*关闭指定的弹窗，会赋值index索引*!/
            layer.close(index);
        })*/
       /*弹出等待框*/
       // layer.load(3,{time:3000});
/*        var a = layer.load(2);
        setTimeout(function(){
            layer.close(a);
        },3000)*/
    })
</script>
</body>
</html>
